<!--申诉记录-->
<template>
  <div class="AppealRecord-box h-full">
    <base-page v-bind="baseInfo">
      <template #searchBar>
        <filter-form
          ref="filterForm"
          :elements="elements"
          @submit="submit"
          @reset="reset"
        />
      </template>

      <template #content>
        <div class="table-box">
          <TableNew
            :loading="tableLoading"
            :data="tableData"
            :columns="columns"
            :hide-pagination="true"
            :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ 'text-align': 'center' }"
            @paginationChange="paginationChange"
          >
            <template #statusOther="scope">
              {{ scope.row.status | statusName }}
            </template>

            <template #action="scope">
              <el-button
                class="text-green-500 hover:text-green-400"
                :class="{ invisible: scope.row.status !== 0 }"
                type="text"
                @click="detailViewFun(scope.row, 'edit')"
              >修改</el-button>

              <el-button type="text" @click="detailViewFun(scope.row, 'check')">查看</el-button>

              <el-button
                class="text-yellow-500 hover:text-yellow-400"
                :class="{ invisible: scope.row.status !== 0 }"
                type="text"
                @click="appealFun(scope.row)"
              >撤回</el-button>
            </template>
          </TableNew>
        </div>
      </template>
    </base-page>

    <Drawer
      :title="drawerType === 'edit' ? '修改' : '查看' + drawerTitle"
      :visible.sync="drawerVisible"
      :footer-btns="footerBtns"
      width="40%"
      @submit="drawerSubmit"
      @cancel="drawerCancel"
    >
      <appeal-details v-if="drawerVisible" ref="appealRecord" :select-info="selectInfo" :type="drawerType" />
    </Drawer>
  </div>
</template>

<script>

import listMixins from '@/mixins/budgetQuert/listMixins'
import AppealDetails from '@/pages/budgetQuert/appealDetails'
import {
  listByUser,
  ysAppealRecordDelete,
  ysAppealRecordGetObj,
  ysAppealRecordUpdate
} from '@/api/budgetQuert'

export default {
  name: 'AppealRecord', // 申诉记录
  components: { AppealDetails },
  filters: {
    statusName(val) {
      let name = ''

      switch (val) {
        case 0:
          name = '待处理'
          break
        case 1:
          name = '已驳回'
          break
        case 2:
          name = '已修正'
          break
      }

      return name
    }
  },
  mixins: [listMixins],
  props: {},
  data() {
    return {
      listInterface: listByUser,

      baseInfo: {
        searchBarShow: true
      },

      elements: [
        {
          label: '来源',
          type: 'select',
          options: [
            {
              label: '业务职能-费用类',
              value: 1
            },
            {
              label: '业务职能-资产类',
              value: 5
            },
            {
              label: '管理职能-费用类',
              value: 2
            },
            {
              label: '管理职能-资产类',
              value: 3
            },
            {
              label: '管理职能-业务量配套指标',
              value: 4
            }
          ],
          key: 'source',
          value: ''
        },
        {
          label: '预算科目名称',
          type: 'input',
          key: 'subjectName',
          value: '',
          width: 150
        },
        {
          label: '状态',
          type: 'select',
          options: [
            {
              label: '待处理',
              value: 0
            },
            {
              label: '已驳回',
              value: 2
            },
            {
              label: '已修正',
              value: 1
            }
          ],
          key: 'status',
          value: ''
        }
      ],

      tableData: [],
      columns: [
        {
          title: '来源',
          dataIndex: 'source',
          width: 140
        },
        {
          title: '预算科目名称',
          dataIndex: 'subjectName',
          width: 140
        },
        {
          title: '预算科目编码',
          dataIndex: 'subjectCode',
          width: 140
        },
        {
          title: '备注',
          dataIndex: 'memo'
        },
        {
          title: '处理人',
          dataIndex: 'handlerName',
          width: 100
        },
        {
          title: '状态',
          dataIndex: 'statusOther',
          type: 'otherTag',
          width: 100
        },
        {
          title: '申诉时间',
          dataIndex: 'appealTime',
          width: 160
        },
        {
          title: '操作',
          dataIndex: 'action',
          type: 'otherTag',
          width: 140,
          fixed: 'left'
        }
      ],

      selectInfo: {},
      drawerType: '',
      drawerVisible: false,
      drawerLoading: false,
      drawerTitle: '申诉记录',
      footerBtns: []
    }
  },
  watch: {
    drawerType(val) {
      if (val === 'edit') {
        this.footerBtns = [
          {
            text: '保存',
            type: 'primary',
            trigger: 'submit',
            loading: this.drawerLoading
          },
          {
            text: '取消',
            type: 'info',
            trigger: 'cancel'
          }
        ]
      } else {
        this.footerBtns = [
          {
            text: '返回',
            type: 'info',
            trigger: 'cancel'
          }
        ]
      }
    }
  },
  methods: {
    detailViewFun(row, type) {
      this.tableLoading = true

      ysAppealRecordGetObj({ id: row.id }).then(res => {
        this.tableLoading = false
        if (res.code === 200) {
          this.drawerType = type
          this.selectInfo = res.data
          this.selectInfo.id = row.id // 程文-后端查详情没返回id需要从列表中获取
          this.selectInfo.sourceNum = row.sourceNum
          this.drawerVisible = true
        } else {
          this.$message.error('获取数据失败')
        }
      })
    },

    appealFun(row) {
      this.$confirm({
        content: '您确定要撤回该条数据?',
        title: '提示',
        okFn: () => {
          this.tableLoading = true
          ysAppealRecordDelete({ id: row.id }).then(res => {
            this.tableLoading = false
            if (res.code === 200) {
              this.getData()
              this.$message.success(res.message)
            } else {
              this.$message.error(res.message)
            }
          })
        },
        cancelFn: () => { }
      })
    },

    drawerSubmit() {
      const appealRecord = this.$refs.appealRecord

      const fileId = []
      if (appealRecord.fileList && appealRecord.fileList.length) {
        appealRecord.fileList.forEach(item => {
          fileId.push(item.url)
        })
      }

      this.drawerLoading = true

      ysAppealRecordUpdate({
        file: fileId,
        id: this.selectInfo.id,
        memo: this.selectInfo.memo
      }).then(res => {
        this.drawerLoading = false
        if (res.code === 200) {
          this.$message.success(res.message)
          this.getData()
          this.drawerCancel()
        } else {
          this.$message.error(res.message)
        }
      })
    },

    drawerCancel() {
      this.selectInfo = {}
      this.drawerVisible = false
    }
  }
}
</script>

<style lang="less" scoped>
.table-box {
  height: 100%;
  display: flex;
  flex-direction: column;
  .el-button {
    font-size: 12px;
    padding: 0;
  }
}
</style>
